<template>
	<view>
		<view class="topnav">
			<van-nav-bar
			  :title=title
			  right-text="清空"
			  left-arrow
			  @click-left="onClickLeft"
			  @click-right="onClickRight"
			/>
		</view>
		<view class="box">
			<view class="search">
				<van-search v-model="value" background="#f3f3f3" show-action  placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"/>
			</view>
			
			<view class="sortnav">
				<view class="item">
					<text>合格</text>
					<image src="../../static/font/x.png" mode=""></image>
				</view>
				<view class="item">
					<text>新品</text>
					<image src="../../static/font/x.png" mode=""></image>
				</view>
				<view class="item">
					<text>销量</text>
					<image src="../../static/font/x.png" mode=""></image>
				</view>
			</view>
			
			<view class="parent">
				<scroll-view v-if="shopList.length>0" class="box-main" scroll-y="true" enable-flex="true" style="display: flex;" show-scrollbar="false">
					<view class="item" v-for="item in shopList" :key="item.sid" @click="putDetail(item.sid)">
					<view class="img">
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<text class="tex">
						{{item.sname}}
					</text>
					<view class="tex2">
						<text class="price">¥{{item.sprice}}</text>
						<text class="gw">{{item.sales}}人付款</text>
					</view>
					</view>
				</scroll-view>
				<view class="null" v-else>
					<text>这个暂时没有商品哦!记得提醒管理员上架!!</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getShopList,getSearch} from '../../request/api.js'
	export default {
		data() {
			return {
				title:'耐克',
				value:'',
				shopList:[],
				id:''
			}
		},
		methods: {
			onClickLeft(){
				uni.navigateBack({
					delta: 1
				});
			},
			onClickRight(){
				
			},
			 getShop(id){
				 getShopList(id,(res)=>{
					 // console.log(res);
					 this.shopList =res
				 })
			},
			putDetail(sid){
				uni.navigateTo({
					url:'/pages/detail/detail?id='+sid
				})
			},
			// 搜索事件
			onSearch(val){
				getSearch({id:this.id,sname:val},(res)=>{
					this.shopList = res
				})
			},
			onCancel(){
				this.getShop(this.id)
			}
		},
		onLoad(option){
			this.title = option.name
			this.id = option.id
			this.getShop(this.id)
			
			// let shop =  this.shopList.filter(item =>{
			// 	return item.pid
			// })
			// console.log(shop);
			// this.shopList.forEach(item=>{
			// 	console.log(item);
			// })
		}
	}
</script>

<style lang="less">
.topnav{
	 .van-nav-bar__text{
		color: #085710;
	}
}
.box{
	width: 100%;
	height: 89vh;
	padding: 8px 10px;
	box-sizing: border-box;
	background-color: #f3f3f3;
	
	.sortnav{
		height: 60rpx;
		width: 100%;
		background: white;
		display: flex;
		justify-content: space-around;
		.item{
			width: 65px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				color: #085710;
			}
		}
		.item image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.box-main{
		margin-top: 10px;
		min-height: 1200rpx;
		// background-color: pink;
		.item{
			display: inline-block;
			width:342rpx;
			height:420rpx;
			background-color: white;
			border-radius: 5px;
			margin-right: 15px;
			cursor:pointer;
			vertical-align:middle;
			margin-bottom: 7px;
			.img{
				display: flex;
				justify-content: center;
			}
			.img image{
				width: 80%;
				height: 150px;
			}
			.tex{
				padding: 0 5px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				 -webkit-line-clamp: 2;
				  overflow-y: hidden;
				  color: #cbcbcb;
				  font-size: 14px;
			}
			.tex2{
				margin-top: 5px;
				padding: 0px 5px;
				display: flex;
				justify-content: space-between;
				.price{
					font-weight: 700;
				}
				.gw{
					font-size: 12px;
					color: #cbcbcb;
				}
			}
		}
		.uni-scroll-view, .uni-scroll-view-contentt{
			display: flex;
		}
	}
}
.box-main .item:nth-child(2n){
			margin-right: 0px !important;
		}
	// 这个是没有商品数据的时候显示的
	
	.null{
		height: 600rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
